<{include file="tpl/header.html"}>
<div class="clearfix">
	<div style="width:350px" class="pull-left">
		<h2>添加游戏</h2>
		<form class="form-horizontal" role="form" action="<{spUrl c=main a=index}>" method="post">
			<div class="form-group">
				<label for="game_title" class="col-sm-3 control-label">标题：</label>
				<div class="col-sm-9">
					<input type="text" name="title" id="game_title" class="form-control" placeholder="标题" value="<{$data_return['title']}>"/>
				</div>
			</div>
			<div class="form-group">
				<label for="game_key" class="col-sm-3 control-label">密码：</label>
				<div class="col-sm-9">
					<input type="text" name="key" id="game_key" class="form-control" placeholder="密码" value="<{$data_return['title']}>"/>
				</div>
			</div>		
			<div class="form-group">
				<label for="game_temple_id" class="col-sm-3 control-label">地图模板：</label>
				<div class="col-sm-9">
					<select name="temple_id" id="game_temple_id" class="form-control">
					<{foreach item=item from=$temple_result}>	
						<option value="<{$item.id}>" ><{$item.title}></option>
					<{/foreach}>
					</select>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-3 col-sm-9">
					<input type="submit" name="game_new" class="btn btn-info" value="添加"/>
				</div>
			</div>
		</form>
	</div>
	<div style="width:620px" class="pull-right">
		<table class="table table-striped">
			<tr>
				<th>标题</th>
				<th>日期</th>
				<th>地图模型</th>
				<th>操作</th>
			</tr>
		<{foreach item=item from=$game_result}>
			<tr>
				<td>
					<{$item.title}>
				</td>
				<td>
					<{$item.time}>
				</td>
				<td>
					<{$item.temple_id}>
				</td>
				<td>
					<a class="game_point_delete" game_id="<{$item.id}>" href="#">清除数据</a>
					<a href="<{spUrl c=main a=index game_delete_id=$item.id}>">删除</a>
				</td>
			</tr>
		<{/foreach}>
		</table>
	</div>
</div>
<div class="clearfix">
	<div style="width:350px" class="pull-left">
		<h2>添加地图模板</h2>
		<form class="form-horizontal" role="form" action="<{spUrl c=main a=index}>" method="post">
			<div class="form-group">
				<label for="temple_title" class="col-sm-3 control-label">标题：</label>
				<div class="col-sm-9">
					<input type="text" name="title" id="temple_title" class="form-control" placeholder="标题" value="<{$data_return['title']}>"/>
				</div>
			</div>	
			<div class="form-group">
				<label for="temple_type" class="col-sm-3 control-label">类型：</label>
				<div class="col-sm-9">
					<select name="type" id="temple_type" class="form-control">
						<option value="1" selected="selected">民间</option>
						<option value="0" >官方</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-3 col-sm-9">
					<input type="submit" name="temple_new" class="btn btn-info" value="添加"/>
				</div>
			</div>
		</form>

	
		<table class="table table-striped">
			<tr>
				<th>标题</th>
				<th>日期</th>
				<th>类型</th>
				<th>操作</th>
			</tr>
		<{foreach item=item from=$temple_result}>
			<tr>
				<td>
					<{$item.title}>
				</td>
				<td>
					<{$item.time}>
				</td>
				<td>
					<{$item.type}>
				</td>
				<td>
					<a href="<{spUrl c=main a=index temple_id=$item.id}>">编辑</a>
					<a href="<{spUrl c=main a=index delete_temple_id=$item.id}>">删除</a>
				</td>
			</tr>
		<{/foreach}>
		</table>
	</div>
	<div class="pull-right" style="position: relative;">
	<{if $temple_id}>
		<h2>编辑地图模板：<{$temple_item.title}></h2>
		<div style="position: absolute;top:66px;right:3px;background:#fff;opacity:0.9;padding:3px; z-index: 10;">
			<div class="opera_item" id="point_new_div" style="display:none;">
				<form class="form-inline" role="form" action="<{spUrl c=main a=point_new}>" method="post">
				 	<div class="form-group">
				    	<input type="text" name="point_title" class="form-control" id="point_title" placeholder='点标题'>
				  	</div>
				  	<div class="form-group" style="width:100px;">
				    	<input type="text" name="point_lng" class="form-control" id="point_lng">
				  	</div>
				  	<div class="form-group" style="width:100px;">
				    	<input type="text" name="point_lat" class="form-control" id="point_lat">
				  	</div>
					<div class="form-group">
						<select name="point_type" id="point_type" class="form-control">
							<option value="1" selected="selected">寻宝点</option>
							<{if !$center_result}>
							<option value="0" >中心点</option>
							<{/if}>
						</select>
					</div>
					<div class="form-group">
						<input type="hidden" name="temple_id" value="<{$temple_id}>" id="temple_id">
						<input type="submit" name="point_new" id="point_new" class="btn btn-info" value='添加'/>
					</div>
			</div>
			<div class="opera_item" id="point_delete_div" style="display:none;">
				<input type="text" name="point_delete_title" id="point_delete_title">
				<input type="hidden" name="point_delete_id" id="point_delete_id">
				<a class="btn btn-danger" id="point_delete" href="<{spUrl c=main a=index temple_id=$item.id}>">删除</a>
			</div>
		</div>
		<div id="map_container" style="width:620px;height: 400px;">
			地图加载中……
		</div>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=M4Sdjd9OEZcm8pttjqUbYzvz"></script>
		<script type="text/javascript">
			var map = new BMap.Map("map_container",{mapType: BMAP_HYBRID_MAP});
			<{if !$center_result}>
				var point = new BMap.Point(119.544, 39.91539);
			<{else}>
				var point = new BMap.Point("<{$center_result.longitude}>", "<{$center_result.latitude}>");
			<{/if}>
			map.centerAndZoom(point,17);// 初始化地图,设置中心点坐标和地图级别。
			map.enableScrollWheelZoom();
			map.addControl(new BMap.OverviewMapControl());    
 
			var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL};
			map.addControl(new BMap.NavigationControl(opts));

			var point_delete_marker = null; //定义待删除marker变量
			//初始化星星
			<{foreach item=item from=$point_result}>
				var point = new BMap.Point(<{$item.longitude}>,<{$item.latitude}>);
				addMarker(point,<{$item.id}>,"<{$item.title}>",<{$item.type}>);
			<{/foreach}>
			var i = <{$item.id+1}>;
			function addMarker(point, index, label,type){  // 创建图标对象 
				i = index; 
				var icon_name = null;
				if(type==1) icon_name = "star"; 
				else  icon_name = "center"; 
				var myIcon = new BMap.Icon("tpl/images/"+icon_name+".png", new BMap.Size(24, 24), {    
					// 指定定位位置。   
					// 当标注显示在地图上时，其所指向的地理位置距离图标左上    
					// 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
					// 图标中央下端的尖角位置。    
					offset: new BMap.Size(12, 12),
					label:label, 
					// 设置图片偏移。   
					// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
					// 需要指定大图的偏移位置，此做法与css sprites技术类似。    
					//imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
			 	});      
				// 创建标注对象并添加到地图   
			 	var marker = new BMap.Marker(point, {icon: myIcon});  
	
			 	map.addOverlay(marker);
			 	marker.addEventListener("click", function(){
			 		$('.opera_item').hide();

			 		$('#point_delete_title').val(label);
			 		$('#point_delete_id').val(index);
			 		point_delete_marker = marker;
			 		$('#point_delete_div').show(); 	   
				 	 
				});      
			}

			
			map.addEventListener("click", function(e){
				if(e.overlay!=null) //判断覆盖物是否存在  
				{  
					return;  
				} 

				$('.opera_item').hide();

				$('#point_lng').val(e.point.lng);
				$('#point_lat').val(e.point.lat);
				$('#point_title').val(i);
				$('#point_new_div').show();	
				
			}); 
			
			$('#point_new').click(function(){
				var lng = $('#point_lng').val();
				var lat = $('#point_lat').val();
				var title = $('#point_title').val();
				var type = $('#point_type').val();
				var temple_id = $('#temple_id').val();
				
				$.ajax({
				   type: "POST",
				   url: "<{spUrl c=main a=point_new}>",
				   data:{lng:lng,lat:lat,title:title,type:type,temple_id:temple_id},
				   success: function(point_id){
				   	 if(point_id){
				     	alert( "添加成功!");
				     	var point = new BMap.Point(lng,lat);
				     	addMarker(point,point_id,title,type);
				     }else{
				     	alert( "添加失败!");
				     }
				   }
				});
				
				$('.opera_item').hide();
				return false;
			});
			$('#point_delete').click(function(){
				var point_delete_id = $('#point_delete_id').val();
				$.ajax({
				   type: "POST",
				   url: "<{spUrl c=main a=point_delete}>",
				   data:{point_delete_id:point_delete_id},
				   success: function(msg){
				     if(msg==1){
				     	alert( "删除成功!");
				     	map.removeOverlay(point_delete_marker);
				     }else{
				     	alert( "删除失败!");
				     }
				   }
				});
				
				$('.opera_item').hide();
				return false;
			});


			$('.game_point_delete').click(function(){
				var game_id = $(this).attr('game_id');
				$.ajax({
				   type: "POST",
				   url: "<{spUrl c=main a=game_point_delete}>",
				   data:{game_id:game_id},
				   success: function(msg){
				     if(msg==1){
				     	alert( "游戏数据清除成功!");
				     }else{
				     	alert( "游戏数据清除失败!");
				     }
				   }
				});
				return false;
			});
		</script>
		
	</div>
	<{/if}>
</div>
<{include file="tpl/footer.html"}>